<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a="http://richfaces.org/a4j"
    template="layout/templateList.xhtml">

<ui:define name="body">
	
	<h2 class="title"><a href="#">Novo Cliente</a></h2><br/>
		
		<div>
			<p>
				<b><font color="red">Atenção:</font></b> Este cadastro é exclusivo para clientes que ainda não tenham realizado nenhum serviço ou compra em nossa loja. Caso você já seja nosso cliente, entre em <a href="contato.seam">contato</a> conosco para solicitar a sua senha.
			</p>
		</div>
	
            <h:form id="novoClienteForm">
            
            	<rich:tabPanel switchType="client">
			        <rich:tab label="Dados do Cliente">
			           <h:panelGrid columns="1">
			            	<s:decorate template="/layout/edit.xhtml">
			            		<ui:define name="label">Nome:</ui:define>
			            		<h:inputText value="#{acessoClienteController.clienteEdicao.dscNome}"
			            			required="true"
			            			maxlength="200"
			            			onkeydown="Mascara(this,Maiusculo)"
									onkeyup="Mascara(this,Maiusculo)"
			            			style="width: 300px;"/>
			            	</s:decorate>
			            	
			            	<s:decorate template="/layout/edit.xhtml">
			            		<ui:define name="label">Telefone Celular:</ui:define>
			            		<h:inputText value="#{acessoClienteController.clienteEdicao.telCelular}"
			            			required="false"
			            			maxlength="14"
			            			style="width: 200px;"
			            			onkeydown="Mascara(this,Telefone);"
			            			onkeyup="Mascara(this,Telefone);"/>
			            	</s:decorate>
			            	
			            	<s:decorate template="/layout/edit.xhtml">
			            		<ui:define name="label">Telefone Residencial:</ui:define>
			            		<h:inputText value="#{acessoClienteController.clienteEdicao.telResidencial}"
			            			required="false"
			            			maxlength="14"
			            			style="width: 200px;"
			            			onkeydown="Mascara(this,Telefone);"
			            			onkeyup="Mascara(this,Telefone);"/>
			            	</s:decorate>
			            	
			            	<s:decorate template="/layout/edit.xhtml">
			            		<ui:define name="label">Endereço:</ui:define>
			            		<h:inputText value="#{acessoClienteController.clienteEdicao.dscEndereco}"
			            			required="true"
			            			onkeydown="Mascara(this,Maiusculo)"
									onkeyup="Mascara(this,Maiusculo)"
			            			maxlength="200"
			            			style="width: 400px;"/>
			            	</s:decorate>
			            	
			            	<s:decorate template="/layout/edit.xhtml">
			            		<ui:define name="label">Cidade:</ui:define>
			            		<h:inputText value="#{acessoClienteController.clienteEdicao.dscCidade}"
			            			required="true"
			            			maxlength="100"
			            			onkeydown="Mascara(this,Maiusculo)"
									onkeyup="Mascara(this,Maiusculo)"
			            			style="width: 300px;"/>
			            	</s:decorate>
			            	
			            	<s:decorate template="/layout/edit.xhtml">
			            		<ui:define name="label">E-mail:</ui:define>
			            		<h:inputText value="#{acessoClienteController.clienteEdicao.dscEmail}"
			            			required="true"
			            			maxlength="200"
			            			style="width: 300px;"/>
			            	</s:decorate>
			            	
			            </h:panelGrid>
			        </rich:tab>
			        <rich:tab label="Dados do Pet">
			        	<br/>
			        	<a:region>
				            <rich:dataTable value="#{acessoClienteController.listaPets}" var="_pet"
				            	rows="7" id="tabelaPets">
				            	<rich:column>
				            		<f:facet name="header">
				            			<h:selectBooleanCheckbox value="#{acessoClienteController.selecionadoTodosPets}">
				            				<a:support event="onchange" action="#{acessoClienteController.selecionaTodosPets()}"
				            					reRender="tabelaPets"/>
				            			</h:selectBooleanCheckbox>
				            		</f:facet>
				            		<h:selectBooleanCheckbox value="#{_pet.selecionado}" />
				            	</rich:column>
				            	
				            	<rich:column>
				            		<f:facet name="header">NOME</f:facet>
				            		<s:decorate template="/layout/editTable.xhtml">
				            			<h:inputText value="#{_pet.dscNome}"
				            				maxlength="100"
				            				required="false"
				            				onkeydown="Mascara(this,Maiusculo)"
											onkeyup="Mascara(this,Maiusculo)"
				            				style="width: 200px;"/>
				            		</s:decorate>
				            	</rich:column>
				            	
				            	<rich:column>
				            		<f:facet name="header">RAÇA</f:facet>
				            		<s:decorate template="/layout/editTable.xhtml">
				            		
				            			<h:inputText value="#{_pet.nomeRacaSelecionada}" id="racas"
				            				onkeydown="Mascara(this,Maiusculo)"
											onkeyup="Mascara(this,Maiusculo)"/>
				            				<rich:suggestionbox id="sugestoesRacas" for="racas" 
				            					suggestionAction="#{acessoClienteController.autocomplete}" 
				            					var="_raca" width="350" height="300" rules="none" 
				            					minChars="1"  fetchValue="#{_raca.dscNome}" 
				            					rows="3">
				            					<rich:column>
				            						<h:outputText value="#{_raca.dscNome}" />
				            					</rich:column>
				            					<a:support event="onselect" ajaxSingle="true"> 
													<f:setPropertyActionListener 
														value="#{_raca.idRaca}" 
														target="#{_pet.idRacaSelecionada}"/> 
												</a:support> 
				            				</rich:suggestionbox> 
				            		</s:decorate>
				            	</rich:column>
				            	
				            	<rich:column>
				            		<f:facet name="header">COR</f:facet>
				            		<s:decorate template="/layout/editTable.xhtml">
				            			<h:inputText value="#{_pet.dscCorPelagem}"
				            				maxlength="100"
				            				onkeydown="Mascara(this,Maiusculo)"
											onkeyup="Mascara(this,Maiusculo)"
				            				style="width: 100px;"
				            				required="false"/>
				            		</s:decorate>
				            	</rich:column>
				            	
				            	<rich:column rendered="false">
				            		<f:facet name="header">PORTE</f:facet>
				            		<s:decorate template="/layout/editTable.xhtml">
				            			<h:selectOneMenu value="#{_pet.porte}"
				            				required="false">
				            				<f:selectItem itemLabel="SELECIONE" itemValue=""/>
				            				<f:selectItem itemLabel="PEQUENO" itemValue="P"/>
				            				<f:selectItem itemLabel="MÉDIO" itemValue="M"/>
				            				<f:selectItem itemLabel="GRANDE" itemValue="G"/>
				            			</h:selectOneMenu>
				            		</s:decorate>
				            	</rich:column>
				            	
				            </rich:dataTable>
				            <rich:datascroller for="tabelaPets"/>
				            
				            <br/>
				            <div class="actionButtons">
				            	
						        	<a:commandButton id="newPet" value="Novo" 
						        		action="#{acessoClienteController.novoPet}"
						        		reRender="tabelaPets"/>
						        		
						        	<a:commandButton id="removePet" value="Excluir" 
						        		action="#{acessoClienteController.excluirPet()}" 
						        		onclick="javascript:if(!confirm('Tem certeza que deseja excluir o(s) pet(s) selecionado(s)'))return false;"
						        		reRender="tabelaPets"/>
					        </div>
			        	</a:region>	
			        </rich:tab>
			    </rich:tabPanel>
            	
	            <h:panelGrid columns="1">
	            	<s:decorate template="/layout/edit.xhtml">
	            		<s:graphicImage value="#{acessoClienteController.recuperaImagemCaptcha()}"/>
	            	</s:decorate>
	            	
	            	<s:decorate template="/layout/edit.xhtml">
	            		<ui:define name="label">Código validação</ui:define>
	            		<h:inputText value="#{acessoClienteController.captcha}"
	            			required="true" 
	            			maxlength="10"
	            			size="30"/>
	            	</s:decorate>
	            </h:panelGrid>
			            
	            <br/>
	            <div class="actionButtons">
		        	<h:commandButton id="submit" value="Salvar" action="#{acessoClienteController.salvarNovoCliente()}"
		            	onclick="javascript:if(!confirm('Tem certeza que deseja salvar?'))return false;#{rich:component('carregando')}.show()"/>
		            	
		            <h:commandButton id="voltar" value="Voltar" 
				        		action="home" 
				        		immediate="true"/>
		        </div>
				<br/>
				
			</h:form>
			
 </ui:define>
</ui:composition>
